<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
		<style>
			.my{
				width:100%;
				padding:100px 50px;
				background-color: aqua;
			}
		</style>
	</head>
	<body>
		<div id="app">
			<h1>{{num}}</h1>
			<div class="my" @click="divHandle">
				<!-- .stop是阻止事件冒泡 -->
				<button @click.stop="btnHandle">单击事件</button>
				<a href="https://www.hunau.edu.cn/" @click.stop.prevent="defaultHandle">湖南农业大学</a>
			</div>
		</div>
		<script>
			let vm=new Vue({
				el:'#app',
				data:{
					num:1
				},
				methods:{
					btnHandle:function(event){
						console.log("按钮被单击");
						//使用原生的js阻止事件冒泡
						//event.stopPropagation();
					},
					divHandle(){
						this.num++;
					},
					defaultHandle(event){
						//js原生的阻止事件的默认行为
						//event.preventDefault();
						console.log(event.target.innerHTML);
					}
				}
			});
		</script>
	</body>
</html>
